<template>
  <div class="app-container">
    <div class="filter_container">
      <el-form :inline="true" :model="commodityform" class="demo-form-inline">
        <el-form-item label="商品名称">
          <el-input
            v-model.trim="commodityform.name"
            size="small"
            clearable
            placeholder="请输入商品名称"
            @keyup.enter.native="handleFiltercommodityform"
          ></el-input>
        </el-form-item>
        <el-form-item label="商品状态">
          <el-select
            ref="goodsStateref"
            v-model="commodityform.goodsState"
            clearable
            placeholder="请选择商品状态"
            size="small"
            @keydown.native="selectBlur($event)"
          >
            <el-option
              v-for="item in PoundstatusList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="维护类型">
          <el-select
            ref="maintainRef"
            v-model="commodityform.maintain"
            clearable
            placeholder="请选择维护类型"
            size="small"
            @keydown.native="selectBlur($event)"
            @keyup.enter.native="$event.target.blur"
          >
            <el-option
              v-for="item in maintainList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="配料表状态">
          <el-select
            ref="materielStateRef"
            v-model="commodityform.materielState"
            clearable
            placeholder="请选择配料表状态"
            size="small"
            @keydown.native="selectBlur($event)"
          >
            <el-option
              v-for="item in ingredientsList"
              :key="item.dictKey"
              :label="item.dictValue"
              :value="item.dictKey"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品类型">
          <el-cascader
            ref="categoryRef"
            v-model="categoryId"
            clearable
            placeholder="请选择商品类型"
            :options="categoriesList"
            @change="selectCategory(categoryId)"
            :show-all-levels="false"
            @keyup.enter.native="$event.target.blur"
            @blur="selectBlur($event)"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="sku码">
          <el-input
            v-model.trim="commodityform.skuCode"
            size="small"
            clearable
            placeholder="请输入sku码"
            @keyup.enter.native="handleFiltercommodityform"
          ></el-input>
        </el-form-item>
        <el-form-item width="300px">
          <el-checkbox v-model="clickFramingchecked" border="" size="small">
            <span>全国</span>
          </el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            plain
            @click="handleFiltercommodityform"
            icon="el-icon-search"
            size="small"
          >查询</el-button>
        </el-form-item>
        <el-form-item>
          <div style="border:none" class="addshop">
            <el-button
              type="success"
              plain
              size="small"
              @click="handleAdd"
              icon="el-icon-circle-plus-outline"
              style="width:90px;"
            >新建商品</el-button>
            <div v-show="showbutton" class="showbutton">
              <span @click="handleSingleproduct">单个商品</span>
              <span @click="handleCommodity">组合商品</span>
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :key="tableKey"
      class="table_list"
      :data="commodityList"
      border=""
      fit
      highlight-current-row
      style="width: 100%;"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="商品ID" prop align="center" width="160px">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="sku码" prop align="center" width="150px">
        <template slot-scope="{row}">
          <span v-for="item in row.goodsSkuS" v-if="row.goodsSkuS.length>1">{{ item.skuCode }}/</span>
          <span v-for="item in row.goodsSkuS" v-else>{{ item.skuCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="配料表状态" prop align="center" width="100px">
        <template slot-scope="{row}">
          <span>{{ row.materielStateName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" prop align="center" width="80px">
        <template slot-scope="{row}">
          <span>{{ row.categoryName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品状态" align="center" width="80px" prop="goodsState">
        <template slot-scope="{row}">
          <span>{{ row.goodsStateName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" prop align="center" width="150px">
        <template slot-scope="{row}">
          <el-button
            type="warning"
            size="mini"
            @click="row.isCombination=='1'?handleDeit(row):handlecomDeit(row)"
            onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}"
          >编辑</el-button>
          <el-button
            type="danger"
            size="mini"
            @click="handleDelete(row)"
            onkeydown="if(event.keyCode==13){event.keyCode=0;event.returnValue=false;}"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="commodityform.page"
      :limit.sync="commodityform.size"
      layout="sizes,prev, pager, next,total"
      @pagination="getList"
    />
    <!-- 单个商品 -->
    <el-dialog
      :title="textSingleproduct[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :show-close="false"
      class="Singleproduct"
      width="60%"
      :before-close="handleCloseSingleproduct"
    >
      <el-form
        :model="SingleproductForm"
        :rules="Singleproductrules"
        ref="SingleproductForm"
        label-width="100px"
        class="demo-ruleForm"
        @click.stop
      >
        <el-form-item label="商品名称" prop="name">
          <el-input
            v-model.trim="SingleproductForm.name"
            style="width:300px"
            size="small"
            v-if="dialogStatus=='create'"
            type="textarea"
            maxlength="64"
            show-word-limit
            :autosize="{ minRows: 4, maxRows:6}"
          ></el-input>
          <el-input
            v-model.trim="SingleproductForm.name"
            style="width:300px"
            size="small"
            v-if="dialogStatus=='update'"
            type="textarea"
            maxlength="64"
            show-word-limit
            :autosize="{ minRows: 4, maxRows:6}"
          ></el-input>
        </el-form-item>
        <el-form-item label="蛋糕类型" v-if="dialogStatus=='create'">
          <el-cascader
            ref="cascaderAddr"
            v-model="selectedValue"
            :options="cakelist"
            clearable
            @change="handelcategoryName"
            @visible-change="getcakelist"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="蛋糕类型" v-if="dialogStatus=='update'">
          <el-cascader
            ref="cascaderAddr"
            v-model="selectedValue"
            :options="cakelist"
            clearable
            @change="handelcategoryName"
            @visible-change="getcakelist"
          ></el-cascader>
          <el-tag
            closable
            :disable-transitions="false"
            @close="handleClose"
            v-if="GoodsInfocakeType"
          >{{GoodsInfocakeType}}</el-tag>
        </el-form-item>
        <el-form-item label="商品原料" v-if="dialogStatus=='create'" v-show="materialsShow">
          <ele-multi-cascader
            clearable
            v-model="materialslistValue"
            :options="materialslist"
            @on-selected="getSelected"
            :inputValue="configTips"
            separator=">"
            placeholder="选择商品原料"
            @change="handlematerialName"
            style="width: 194px;"
          ></ele-multi-cascader>
        </el-form-item>
        <el-form-item label="商品原料" v-if="dialogStatus=='update'" v-show="materialsShow">
          <ele-multi-cascader
            clearable
            v-model="materialslistValue"
            :options="materialslist"
            @on-selected="getSelected"
            :inputValue="configTips"
            separator=">"
            placeholder="选择商品原料"
            @change="handlematerialName"
            style="width: 194px;"
          ></ele-multi-cascader>
          <div>
            <span
              style="margin-right:10px ;"
              v-if="checkedmaterialslist&&checkedmaterialslist.length"
            >已选：</span>
            <el-tag
              v-for="(tag,index) in checkedmaterialslist"
              :key="index"
              closable
              :disable-transitions="false"
              @close="handlecommodityindexClose(tag,index)"
            >{{tag.materialName}}</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="商品主图:" prop="mainPic" required>
          <div style="margin-bottom: 15px;">
            <el-upload
              list-type="picture-card"
              action="/api/xmbz-goods/file/upload"
              :show-file-list="false"
              :data="{tag:'good'}"
              :on-success="handleAvatarSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <img
                v-if="SingleproductForm.mainPic&&SingleproductForm.mainPic.length"
                :src="SingleproductForm.mainPic"
                class="avatar"
              >
              <i v-else class="el-icon-plus"></i>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item label="商品副图:" prop="title" v-if="dialogStatus=='create'">
          <div style="margin-bottom: 15px;">
            <el-upload
              action="/api/xmbz-goods/file/upload"
              :data="{tag:'good'}"
              :on-exceed="handleExceed"
              list-type="picture-card"
              :limit="4"
              :on-success="handleftSuccess"
              :file-list="SingleproductForm.pics"
              :on-remove="beforeRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="商品副图:" prop="title" v-if="dialogStatus=='update'">
          <div style="margin-bottom: 15px;">
            <el-upload
              action="/api/xmbz-goods/file/upload"
              :data="{tag:'good'}"
              :on-exceed="handleExceed"
              list-type="picture-card"
              :on-success="handleftSuccess"
              :limit="4"
              :file-list="SingleproductForm.pics"
              :on-remove="beforeRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="商品详情:">
          <el-input
            type="textarea"
            size="small"
            v-model.trim="SingleproductForm.description"
            style="width:400px"
            maxlength="300"
            show-word-limit
            :autosize="{ minRows: 6, maxRows:8}"
            v-if="dialogStatus=='create'"
          ></el-input>
          <el-input
            type="textarea"
            size="small"
            v-model.trim="SingleproductForm.description"
            style="width:400px"
            maxlength="300"
            show-word-limit
            :autosize="{ minRows: 6, maxRows:8}"
            v-if="dialogStatus=='update'"
          ></el-input>
        </el-form-item>
        <hr>
        <h2>商品规格</h2>
        <div class="specifications">
          <div class="rows" v-for="(item,index) in SingleproductForm.goodsSkuRequests" :key="index">
            <el-form-item label="规格">
              <el-input size="small" v-model.trim="item.specs" maxlength="20" style="width:100px"></el-input>
            </el-form-item>
            <el-form-item label="定价(元)" v-if="dialogStatus=='update'">
              <el-input
                size="small"
                type="number"
                v-model.trim="item.modifyPrice"
                :min="0"
                oninput="if(value.length>7)value=value.slice(0,7)"
                style="width:100px"
                v-if="dialogStatus=='update'"
              ></el-input>
            </el-form-item>
            <el-form-item label="定价(元)" v-if="dialogStatus=='create'">
              <el-input
                size="small"
                type="number"
                v-model.trim="item.price"
                :min="0"
                oninput="if(value.length>7)value=value.slice(0,7)"
                style="width:100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="sku码">
              <el-input
                size="small"
                v-model.trim="item.skuCode"
                style="width:100px"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)"
                maxlength="20"
                onafterpaste="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)"
              ></el-input>
            </el-form-item>
            <el-form-item label="upc码">
              <el-input
                size="small"
                type="number"
                v-model.trim="item.upc"
                :min="0"
                style="width:100px"
                maxlength="50"
                onkeyup="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)"
                onafterpaste="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品状态">
              <el-radio-group v-model="item.goodsState">
                <el-radio :label="1">可售</el-radio>
                <el-radio :label="2">不可售</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <div class="Delete_specification" @click="handleDelete_specification(index)">
                <!-- <img :src="icondelete" alt="" class="icondelete"> -->
                <i class="el-icon-remove-outline" size="medium"></i>
                <span>移除</span>
              </div>
              <div v-if="dialogStatus=='create'&&upload_ingredientshow">
                <div
                  class="upload_ingredient"
                  @click="handleupload_ingredient(item,index)"
                  v-if="item.materielState==2"
                >
                  <i class="el-icon-circle-plus-outline"></i>
                  <span>上传配料表</span>
                </div>
                <div
                  class="edit_ingredient"
                  @click="handleuedit_ingredient(item,index)"
                  v-if="item.materielState==1||item.categoryName=='蛋糕'"
                >
                  <i class="el-icon-edit-outline"></i>
                  <span>编辑配料表</span>
                </div>
              </div>
              <div v-if="dialogStatus=='update'&&upload_ingredientshow">
                <div
                  class="upload_ingredient"
                  @click="handleupload_ingredient(item,index)"
                  v-if="item.materielState==2||item.categoryName=='蛋糕'"
                >
                  <i class="el-icon-circle-plus-outline"></i>
                  <span>上传配料表</span>
                </div>
                <div
                  class="edit_ingredient"
                  @click="handleuedit_ingredient(item,index)"
                  v-if="item.materielState==1||item.categoryName=='蛋糕'"
                >
                  <i class="el-icon-edit-outline"></i>
                  <span>编辑配料表</span>
                </div>
              </div>
            </el-form-item>
          </div>
          <div class="title" @click="handleAdd_specification">
            <img :src="iconadd" alt="">添加规格，最多10个
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="dialogStatus==='create'?handelDialogReset(SingleproductForm,'SingleproductForm'):handelDialogResetupdate(SingleproductForm,'SingleproductForm')"
        >
          取
          消
        </el-button>
        <el-button
          type="primary"
          @click="dialogStatus==='create'?createSingleData(SingleproductForm,'SingleproductForm'):updateSingleData(SingleproductForm,GoodsInfocakeType,'SingleproductForm')"
        >
          确
          定
        </el-button>
      </div>
    </el-dialog>
    <!-- 组合商品 -->
    <el-dialog
      :title="textCommodity[diaCommodityStatus]"
      :visible.sync="dialogCommodityVisible "
      :show-close="false"
      class="Commodityproduct"
    >
      <el-form
        :model="CommodityFormList"
        :rules="Commodityrules"
        ref="CommodityFormList"
        label-width="120px"
        class="demo-ruleForm"
        @click.stop
      >
        <el-form-item label="组合商品名称" prop="name">
          <el-input
            v-model.trim="CommodityFormList.name"
            style="width:200px"
            size="small"
            v-if="diaCommodityStatus=='create'"
            type="textarea"
            maxlength="64"
            show-word-limit
            :autosize="{ minRows: 4, maxRows:6}"
          ></el-input>
          <el-input
            v-model.trim="CommodityFormList.name"
            style="width:200px"
            size="small"
            v-if="diaCommodityStatus=='update'"
            type="textarea"
            maxlength="64"
            show-word-limit
            :autosize="{ minRows: 4, maxRows:6}"
          ></el-input>
        </el-form-item>
        <el-form-item label="蛋糕类型" v-if="diaCommodityStatus=='create'">
          <el-cascader
            ref="cascaderAddr"
            v-model="selectedValue"
            :options="cakelist"
            clearable
            @change="handelcategoryzeName"
            @visible-change="getcakelist"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="蛋糕类型" v-if="diaCommodityStatus=='update'">
          <el-cascader
            ref="cascaderAddr"
            v-model="selectedValue"
            :options="cakelist"
            clearable
            @change="handelcategoryzeName"
            @visible-change="getcakelist"
          ></el-cascader>
          <el-tag
            closable
            :disable-transitions="false"
            @close="handlecommodityClose(GoodsInfocakeTypeIds)"
            v-if="GoodsInfocakeType"
          >{{GoodsInfocakeType}}</el-tag>
        </el-form-item>
        <el-form-item label="商品原料" v-show="materialsShow" v-if="diaCommodityStatus=='create'">
          <ele-multi-cascader
            clearable
            v-model="materialslistValue"
            :options="materialslist"
            separator=">"
            placeholder="选择商品原料"
            @change="handlematerialzhName"
            style="width: 194px;"
          ></ele-multi-cascader>
        </el-form-item>
        <el-form-item label="商品原料" v-show="materialsShow" v-if="diaCommodityStatus=='update'">
          <ele-multi-cascader
            clearable
            v-model="materialslistValue"
            :options="materialslist"
            separator=">"
            placeholder="选择商品原料"
            @change="handlematerialzhName"
            style="width: 194px;"
          ></ele-multi-cascader>
          <div>
            <span
              style="margin-right:10px ;"
              v-if="checkedmaterialslist&&checkedmaterialslist.length"
            >已选：</span>
            <el-tag
              v-for="(tag,index) in checkedmaterialslist"
              :key="index"
              closable
              :disable-transitions="false"
              @close="handlecommodityindexClose(tag,index)"
            >{{tag.materialName}}</el-tag>
          </div>
        </el-form-item>
        <el-form-item label="商品主图:" prop="mainPic" required>
          <div style="margin-bottom: 15px;">
            <div style="margin-bottom: 15px;">
              <el-upload
                list-type="picture-card"
                action="/api/xmbz-goods/file/upload"
                :show-file-list="false"
                :data="{tag:'good'}"
                :on-success="handleCombinedSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <img
                  v-if="CommodityFormList.mainPic"
                  :src="CommodityFormList.mainPic"
                  class="avatar"
                >
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="商品副图:" prop="title" v-if="diaCommodityStatus=='create'">
          <div style="margin-bottom: 15px;">
            <el-upload
              action="/api/xmbz-goods/file/upload"
              :data="{tag:'good'}"
              :file-list="SingleproductForm.pics"
              list-type="picture-card"
              :on-success="handlezhfuSuccess"
              :on-remove="beforezhRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="商品副图:" prop="title" v-if="diaCommodityStatus=='update'">
          <div style="margin-bottom: 15px;">
            <el-upload
              action="/api/xmbz-goods/file/upload"
              :data="{tag:'good'}"
              :on-exceed="handleExceed"
              list-type="picture-card"
              :on-success="handleftSuccess"
              :limit="4"
              :file-list="CommodityFormList.pics"
              :on-remove="beforezhRemove"
              v-if="this.SingleproductForm.pics"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" v-if="CommodityFormList.pics" :src="dialogImageUrl" alt="">
            </el-dialog>
          </div>
        </el-form-item>
        <el-form-item label="商品详情:">
          <el-input
            type="textarea"
            size="small"
            v-model.trim="CommodityFormList.description"
            style="width:400px"
            maxlength="300"
            show-word-limit
            :autosize="{ minRows: 6, maxRows:8}"
          ></el-input>
        </el-form-item>
        <hr>
        <div class="specifications">
          <h2>组合选项</h2>
          <el-form-item label="商品名称" prop="goodsCombinationList" style="position:relative">
            <el-input
              v-model="CommodityFormList.commodityserch"
              style="width:200px"
              size="small"
              placeholder="请输入商品名称搜索"
              @blur="handlecommodityserch(CommodityFormList.commodityserch)"
            ></el-input>
            <div v-if="CommodityFormList.goodsCombinationList">
              <span
                style="margin-right:10px ;"
                v-if=" CommodityFormList.goodsCombinationList&& CommodityFormList.goodsCombinationList.length"
              >已选：</span>
              <el-tag
                v-for="(tag,index) in CommodityFormList.goodsCombinationList"
                :key="index"
                closable
                :disable-transitions="false"
                @close="handlegoodListClose(tag,index)"
              >{{tag.zuGoodsName}}~{{tag.zuSpecs}}</el-tag>
            </div>
            <div class="specificationsslist" v-if="commodityserchshow">
              <el-tabs :tab-position="tabPosition" style="height: 200px;">
                <el-tab-pane
                  v-for="(item,index) in combinedData"
                  :key="index"
                  :label="item.name"
                  v-if="combinedData&&combinedData.length>0"
                >
                  <p
                    v-for="(child2,index2) in item.goodsSkuList"
                    :key="index2"
                    @click="handleGoodsList(item.name,child2.specs,child2.id)"
                    style="120px"
                  >{{child2.specs}}</p>
                </el-tab-pane>
              </el-tabs>
              <div class="close">
                <i class="el-icon-error Delgoodlist" @click="headleclose"></i>
              </div>
            </div>
          </el-form-item>
          <div class="lows">
            <el-form-item label="sku码">
              <el-input
                size="small"
                v-model.trim="CommodityFormList.skuCode"
                :min="0"
                style="width:100px"
                onkeyup="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)"
                maxlength="20"
                onafterpaste="value=value.replace(/[^\-?\d.]/g,'').slice(0,20)"
              ></el-input>
            </el-form-item>
            <el-form-item label="upc码">
              <el-input
                size="small"
                type="number"
                v-model.trim="CommodityFormList.upc"
                :min="0"
                style="width:100px"
                maxlength="50"
                onkeyup="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)"
                onafterpaste="value=value.replace(/[^\d]|^[0]/g,'').slice(0,50)"
              ></el-input>
            </el-form-item>
            <el-form-item label="定价(元)" v-if="diaCommodityStatus=='create'">
              <el-input
                size="small"
                type="number"
                v-model.trim="CommodityFormList.price"
                :min="0"
                oninput="if(value.length>7)value=value.slice(0,7)"
                style="width:100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="定价(元)" v-if="diaCommodityStatus=='update'">
              <el-input
                size="small"
                type="number"
                v-model.trim="CommodityFormList.zuModifyPrice"
                :min="0"
                oninput="if(value.length>7)value=value.slice(0,7)"
                style="width:100px"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品状态">
              <el-radio-group v-model="CommodityFormList.goodsState">
                <el-radio :label="1">可售</el-radio>
                <el-radio :label="2">不可售</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handelDialogResetCommodity(CommodityFormList,'CommodityFormList')">取 消</el-button>
        <el-button
          type="primary"
          @click="diaCommodityStatus==='create'?createcommodityData(CommodityFormList,'CommodityFormList'):updatecommodityData(CommodityFormList,GoodsInfocakeType,'CommodityFormList')"
        >
          确
          定
        </el-button>
      </div>
    </el-dialog>
    <!-- 物料表 -->
    <!-- ingredient -->
    <el-dialog title="上传物料表" :visible.sync="ingredientshow" :show-close="false" width="65%">
      <ingredientadd
        @close="handleingredientclose"
        @addingredientform="addingredientform"
        :addindex="addindex"
      ></ingredientadd>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="编辑物料表" :visible.sync="ingredientshowedit" :show-close="false" width="65%">
      <ingredientedit
        @closeeidt="handleingredientclosedit"
        @eidtingredientedit="eidtingredientedit"
        :addindex="addindex"
        :eidtingredient="eidtingredient"
      ></ingredientedit>
    </el-dialog>
  </div>
</template>

<script>
import {
  Categories, // 商品类型
  GoodsMaterial, //商品原料
  CakeWhereaboutsList, //商品状态
  addGoods, //添加商品
  goodsList, //列表
  searchGoodsList, //搜索
  deleteGoods, //删除
  GoodsInfo, //详情
  goodsUpdate //更新提交
} from "@/api/commodityfiles";
import ingredientadd from "@/components/ingredient/add";
import ingredientedit from "@/components/ingredient/edit";
//引入图片
import Pagination from "@/components/Pagination"; //分页
import select from "@/assets/image/selected.png";
import iconadd from "@/assets/image/icon_add.png";
import icondelete from "@/assets/image/icon_delete.png";
import groupnodataimg from "@/assets/image/groupnodata.png";
export default {
  components: {
    Pagination,
    ingredientedit,
    ingredientadd
  },
  data() {
    return {
      props: {
        multiple: true
      },
      groupnodataimg,
      // start------------------------------------------------------------
      select, //引入图标
      iconadd, //引入图标
      icondelete, //引入图标
      // 列表部分------------------------------------------------------------
      commodityform: {
        //查询条件
        deptId: "",
        name: "", //商品名称
        goodsState: "", //商品状态
        categoryId: "", //商品类型
        skuCode: "", //sku
        maintain: "", //维护类型
        materielState: "", //配料表状态

        page: 1,
        size: 10
      },
      GoodsInfocakeType: "",
      GoodsInfocakeTypeIds: "",
      PoundstatusList: [], //商品状态
      categoriesList: [], //商品类型列表
      categoryId: [], //商品类型列表

      commodityList: [
        // 商品列表
      ],

      materialsShow: true,
      // 单个商品------------------------------------------------------------
      textSingleproduct: {
        update: "修改单个商品",
        create: "添加单个商品"
      },
      materialsNameList: [],
      SelectedmaterialsList: [],
      picList: [],
      goodsPicList: [],
      clickFramingchecked: true, //全国

      //组合商品------------------------------------------------------------
      fileList: [],
      combinedData: [],
      Commoditymaterials: "",
      dialogImageUrl: "",
      dialogVisible: false,
      tabPosition: "left",
      tableKey: 0,
      total: 0,
      listLoading: true,
      showbutton: false,
      activeNames: ["1"],

      textCommodity: {
        update: "修改组合商品",
        create: "添加组合商品"
      },
      dialogFormVisible: false, //单个商品
      dialogCommodityVisible: false, //组合商品
      caketype: false,
      materials: false,
      dialogStatus: "",
      diaCommodityStatus: "",
      formLabelWidth: "120px",
      shoptype: [], //商品类型
      SingleproductForm: {
        name: "",
        cakeType: "",
        categoryId: "",
        materialId: "",
        Commoditymaterials: "", // 商品原料
        mainPic: "", //  主图
        pics: [], //附图
        description: "",
        isOnSale: "",
        goodsSkuRequests: [
          {
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1,
            goodsSkuProduction: null,
            materielState: 2
          }
        ]
      },
      // commodityserch:[],
      Singleproductrules: {
        name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur"
          }
        ],
        commodityserch: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "change"
          }
        ],
        mainPic: [
          {
            required: true,
            message: "请上传商品主图",
            trigger: "blur"
          }
        ],
        cakeType: [
          {
            required: true,
            message: "请至少选择一个商品类型",
            trigger: "change"
          }
        ],
        Commoditymaterials: [
          {
            required: true,
            message: "请至少选择一个商品原料",
            trigger: "change"
          }
        ],
        specs: [
          {
            required: true,
            message: "请输入商品规格",
            trigger: "blur"
          }
        ],
        skuCode: [
          {
            required: true,
            message: "请输入商品sku码",
            trigger: "blur"
          }
        ],
        upc: [
          {
            required: true,
            message: "请输入商品upc码",
            trigger: "blur"
          }
        ],
        price: [
          {
            required: true,
            message: "请输入商品定价",
            trigger: "blur"
          }
        ]
      },
      Commodityrules: {
        name: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur"
          }
        ],
        commodityserch: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "change"
          }
        ],
        mainPic: [
          {
            required: true,
            message: "请上传商品主图",
            trigger: "blur"
          }
        ],
        Commoditymaterials: [
          {
            required: true,
            message: "请至少选择一个商品原料",
            trigger: "change"
          }
        ],
        specs: [
          {
            required: true,
            message: "请输入商品规格",
            trigger: "blur"
          }
        ],
        skuCode: [
          {
            required: true,
            message: "请输入商品sku码",
            trigger: "blur"
          }
        ],
        upc: [
          {
            required: true,
            message: "请输入商品upc码",
            trigger: "blur"
          }
        ],
        price: [
          {
            required: true,
            message: "请输入商品定价",
            trigger: "blur"
          }
        ]
      },
      materialslist: [],
      materialslists: [],
      combinedDataCode: [],
      combinedDataName: [], // 组合数据
      checkedmaterialslist: [],
      cakelist: [],
      // 组合商品
      commodityserchshow: false,
      checkboxGroup1: [],
      CommodityFormList: {
        name: "",
        cakeType: "",
        categoryId: "",
        materialId: "",
        description: "",
        Commoditymaterials: "", // 商品原料
        mainPic: "", //  主图
        pics: [], //附图
        commodityserch: "",
        goodsState: 1, //商品状态
        goodsCombinationList: [], //组合数据
        price: "", // 定价
        skuCode: "", // sku 码
        upc: "", // uPc
        zuModifyPrice: "",
        isOnSale: ""
      },
      cityareaId: "",
      materialName: "",
      checkList: [],
      selectedValue: [],
      materialslistValue: [],
      configTips: null,
      // 维护类型
      maintainList: [
        {
          dictKey: 1,
          dictValue: "已维护"
        },
        {
          dictKey: 3,
          dictValue: "未维护"
        }
      ],
      //配料------------------------------------------------------------------------------------------------
      ingredientsList: [
        {
          dictKey: 1,
          dictValue: "已上传"
        },
        {
          dictKey: 2,
          dictValue: "未上传"
        }
      ], //配料表
      ingredientshow: false,
      upload_ingredientshow: false, //只有蛋糕才会显示上传及编辑配料表
      goodsSkuProductionlists: null,
      materielState: 2,
      ingredientshowedit: false, // 编辑
      eidtingredient: {},
      addindex: -1
    };
  },
  watch: {
    dialogFormVisible() {
      if (this.dialogFormVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
        window.removeEventListener("beforeunload", this.keyupEnter, false);
      } else {
        window.addEventListener("keydown", this.keyupEnter);

      }
    },
    dialogCommodityVisible() {
      if (this.dialogCommodityVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    ingredientshow() {
      if (this.ingredientshow == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    },
    ingredientshowedit() {
      if (this.ingredientshowedit == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        window.addEventListener("keydown", this.keyupEnter);
      }
    }
  },
   created() {
    document.onkeydown = (e) => {
      var key = window.event.keyCode
      if (key === 13) {
        this.$msgbox.close()
      }
    }
  },
  mounted() {
    var saberareaIds = JSON.parse(localStorage.getItem("saber-areaId"));
    this.cityareaId = saberareaIds["content"];
    this.getList();
    this.getCategoriesList(); //查蛋糕类型
    // this.getcakelist(); //查蛋糕类型
    this.getGoodsMaterial(); // 原料
    // this.handlecommodityserch();
    this.getCakeWhereaboutsList(); // 商品状态
    window.addEventListener("keydown", this.keyupEnter);
  },
  methods: {
    selectBlur(e) {
      if (e.keyCode == 13) {
        this.$refs["goodsStateref"].blur();
        this.$refs["maintainRef"].blur();
        this.$refs["materielStateRef"].blur();
        e.returnValue = false;
      }
    },
    // 回车事件
    keyupEnter() {
      if (window.event.keyCode == 13) {
        this.handleFiltercommodityform(); // 查询事件
      }
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
      window.addEventListener("keydown", this.keyupEnter);
    },
    deactivated() {
      window.removeEventListener("keydown", this.keyupEnter);
    },
    // 公共部分--------------------------------------------------------------------------------
    tableRowClassName({
      //表格样式
      row
    }) {
      if (row.isOnSale === 3) {
        return "warning-row";
      }
      return "";
    },
    getCakeWhereaboutsList() {
      CakeWhereaboutsList("").then(response => {
        this.PoundstatusList = response.data.data;
      });
    },
    getcakelist() {
      Categories("").then(response => {
        // this.cakelist = response.data.data;
        const batchdata = response.data.data;
        const dataValueBatch = batchdata =>
          batchdata.map(
            ({ id, categoryName, children }) =>
              children
                ? {
                    value: id,
                    label: categoryName,
                    children: dataValueBatch(children)
                  }
                : {
                    value: id,
                    label: categoryName
                  }
          );
        this.cakelist = dataValueBatch(batchdata);
      });
    },
    handelTabs(tab) {
      this.materialName = tab.label;
      if (tab.label == "蛋糕") {
        this.materialsShow = true;
      } else {
        this.materialsShow = false;
      }
    },
    getSelected(val) {},
    getCategoriesList() {
      //蛋糕类型
      Categories("").then(response => {
        const batchdata = response.data.data;
        const dataValueBatch = batchdata =>
          batchdata.map(
            ({ id, categoryName, children }) =>
              children
                ? {
                    value: id,
                    label: categoryName,
                    children: dataValueBatch(children)
                  }
                : {
                    value: id,
                    label: categoryName
                  }
          );
        this.categoriesList = dataValueBatch(batchdata);
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    getGoodsMaterial() {
      //商品原料
      GoodsMaterial("").then(response => {
        const batchdata = response.data.data;
        const dataValueBatch = batchdata =>
          batchdata.map(
            ({ id, materialName, children }) =>
              children
                ? {
                    value: id,
                    label: materialName,
                    children: dataValueBatch(children),
                    disabled: true
                  }
                : {
                    value: id,
                    label: materialName
                  }
          );
        this.materialslist = dataValueBatch(batchdata);
      });
    },

    selectCategory(selected) {
      //选择蛋糕类型
      this.commodityform.categoryId = selected;
    },
    // 商品列表页面部分
    handleFiltercommodityform() {
      this.showbutton = false;
      //查询

      if (
        this.commodityform.categoryId &&
        this.commodityform.categoryId.length
      ) {
        this.commodityform.categoryId = this.commodityform.categoryId[
          this.commodityform.categoryId.length - 1
        ];
      }
      this.commodityform.page = 1;
      this.getList();
    },
    handleAdd() {
      // 新建商品
      this.showbutton = !this.showbutton;
    },
    getList() {
      //列表数据
      this.listLoading = true;
      if (this.clickFramingchecked == true) {
        this.commodityform.deptId = 1;
      } else {
        this.commodityform.deptId = this.cityareaId;
      }
      goodsList(this.commodityform).then(response => {
        this.commodityList = response.data.data.rows;
        this.total = response.data.data.total;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },
    handleDelete(row) {
      if (row.deptId == 1) {
        if (this.clickFramingchecked == true) {
          this.$confirm(
            "删除商品后,全国其他城市同一商品会同步删除,是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(() => {
              deleteGoods({
                goodsId: row.id
              }).then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.getList();
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除"
              });
            });
        } else {
          this.$message({
            type: "warning",
            message: "不能删除该商品,需要勾选全国按钮去编辑"
          });
          return false;
        }
      } else {
        this.showbutton = false;
        this.$confirm("是否删除该城市下的当前商品?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            deleteGoods({
              goodsId: row.id
            }).then(() => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    handleCaketype() {
      this.caketype = !this.caketype;
      this.getcakelist();
    },
    handleMaterials() {
      this.materials = !this.materials;
      this.materialsNameList = [];
      this.getGoodsMaterial();
    },

    // 图片上传
    // 图片预览及删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    // 单个主图开始上传
    handleAvatarSuccess(response, file, fileList) {
      this.SingleproductForm.mainPic = response.data;
      console.log(fileList);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 4 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(index) {
      this.SingleproductForm.pics.splice(index, 1);
    },
    beforezhRemove(index) {
      this.CommodityFormList.pics.splice(index, 1);
    },
    // 组合
    handleCombinedSuccess(response) {
      this.CommodityFormList.mainPic = response.data;
    },
    // 幅图上传
    handleftSuccess(response) {
      this.SingleproductForm.pics.push({
        url: response.data
      });
    },
    // 组合幅图上传
    handlezhfuSuccess(response) {
      this.CommodityFormList.pics.push({
        url: response.data
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreviewFigure(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 单个商品-----------------------------------------------
    handleSingleproduct() {
      //添加单个商品
      this.dialogStatus = "create";
      this.showbutton = !this.showbutton;
      this.dialogFormVisible = true;
      this.upload_ingredientshow = false;
      this.SingleproductForm.pics = [];
      this.dialogImageUrl = "";
      this.getcakelist(); //查蛋糕类型
      this.SingleproductForm.categoryId = [];
      this.selectedValue = [];
      this.materialslistValue = [];
      this.SingleproductForm = {
        name: "",
        cakeType: "",
        categoryId: "",
        materialId: "",
        Commoditymaterials: "", // 商品原料
        mainPic: "", //  主图
        pics: [], //附图
        description: "",
        goodsSkuRequests: [
          {
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1,
            goodsSkuProduction: null,
            materielState: 2
          }
        ]
      };
    },
    handleDeit(item) {
      //单个编辑页面
      if (item.deptId == 1) {
        if (this.clickFramingchecked == true) {
          //城市ID为1及选中全国
          this.$confirm(
            "编辑商品后,全国其他城市同一商品会同步修改, 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
              closeOnClickModal: false,
              //阻止键盘点击回车事件
              beforeClose(action, instance, done) {
                // console.log(action,instance)
                if (action == "confirm") {
                  instance.$refs["confirm"].$el.onclick = function(e) {
                    e = e || window.event;
                    console.log(e.detail);
                    if (e.detail != 0) {
                      done();
                    } else {
                      console.log("1233");
                      window.removeEventListener(
                        "keydown",
                        this.keyupEnter,
                        false
                      );
                    }
                  };
                } else {
                  done();
                }
              }
            }
          )
            .then(() => {
              this.showbutton = false;
              var materialIdlsit = [];
              //单个编辑页面
              this.getCategoriesList();
              this.getcakelist();
              this.dialogStatus = "update";
              this.dialogFormVisible = true;
              if (item.parentCategoryId) {
                if (item.parentCategoryId == "1670323326059520") {
                  this.materialsShow = true;
                } else {
                  this.materialsShow = false;
                }
              }
              GoodsInfo({
                goodsId: item.id
              }).then(response => {
                this.SingleproductForm.name = response.data.data.name;
                this.SingleproductForm.categoryId =
                  response.data.data.categoryId;
                this.SingleproductForm.id = response.data.data.id;
                this.SingleproductForm.mainPic = response.data.data.mainPic;

                this.SingleproductForm.description =
                  response.data.data.description;
                this.GoodsInfocakeType = item.categoryName;
                this.GoodsInfocakeTypeIds = item.categoryId;
                this.checkedmaterialslist =
                  response.data.data.goodsRelationMaterialVOList;
                this.checkedmaterialslist.map(child => {
                  materialIdlsit.push(child.id);
                });
                this.SingleproductForm.materialId = materialIdlsit;
                this.SingleproductForm.pics = response.data.data.goodsPicList;
                this.goodsPicList = response.data.data.goodsPicList;
                this.SingleproductForm.goodsSkuRequests =
                  response.data.data.goodsSkuList;
                this.SingleproductForm.pics.map(child => {
                  child.url = child.pic;
                });
                if (response.data.data.categoryName == "蛋糕") {
                  this.upload_ingredientshow = true;
                } else {
                  this.upload_ingredientshow = false;
                }
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消修改"
              });
            });
        } else {
          this.$message({
            type: "warning",
            message: "不能编辑该商品,需要勾选全国按钮去编辑"
          });
          return false;
        }
      } else {
        this.showbutton = false;
        var materialIdlsit = [];
        //单个编辑页面
        this.getCategoriesList();
        this.getcakelist();
        this.dialogStatus = "update";
        this.dialogFormVisible = true;
        if (item.parentCategoryId) {
          if (item.parentCategoryId == "1670323326059520") {
            this.materialsShow = true;
          } else {
            this.materialsShow = false;
          }
        }
        GoodsInfo({
          goodsId: item.id
        }).then(response => {
          this.SingleproductForm.name = response.data.data.name;
          this.SingleproductForm.categoryId = response.data.data.categoryId;
          this.SingleproductForm.id = response.data.data.id;
          this.SingleproductForm.mainPic = response.data.data.mainPic;
          this.SingleproductForm.description = response.data.data.description;
          this.GoodsInfocakeType = item.categoryName;
          this.GoodsInfocakeTypeIds = item.categoryId;
          this.checkedmaterialslist =
            response.data.data.goodsRelationMaterialVOList;
          this.checkedmaterialslist.map(child => {
            materialIdlsit.push(child.id);
          });
          this.SingleproductForm.materialId = materialIdlsit;
          this.SingleproductForm.pics = response.data.data.goodsPicList;
          this.goodsPicList = response.data.data.goodsPicList;
          this.SingleproductForm.goodsSkuRequests =
            response.data.data.goodsSkuList;
          this.SingleproductForm.pics.map(child => {
            child.url = child.pic;
          });
          if (response.data.data.categoryName == "蛋糕") {
            this.upload_ingredientshow = true;
          } else {
            this.upload_ingredientshow = false;
          }
        });
      }
    },
    handleClose() {
      this.GoodsInfocakeType = "";
      this.SingleproductForm.cakeType = "";
      this.SingleproductForm.categoryId = "";
    },
    handlecommodityClose() {
      this.GoodsInfocakeType = "";
      this.CommodityFormList.cakeType = "";
      this.CommodityFormList.categoryId = "";
    },
    handleindexClose(tag, index) {
      this.checkedmaterialslist.splice(index, 1);
      this.getGoodsMaterial();
    },
    handlecommodityindexClose(tag, index) {
      this.checkedmaterialslist.splice(index, 1);
      this.getGoodsMaterial();
    },
    handlegoodListClose(tag, index) {
      this.CommodityFormList.goodsCombinationList.splice(index, 1);
    },
    handelDialogReset(verification, SingleproductForm) {
      //取消单个商品页面
      this.dialogFormVisible = false;
      this.dialogStatus = "create";
      this.$refs[SingleproductForm].resetFields();
      this.dialogFormVisible = false;
      this.cakelist = [];
      this.SingleproductForm = {
        name: "",
        cakeType: "",
        categoryId: "",
        materialId: "",
        Commoditymaterials: "", // 商品原料
        mainPic: "", //  主图
        pics: [], //附图
        description: "",
        goodsSkuRequests: [
          {
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1,
            goodsSkuProduction: null,
            materielState: 2
          }
        ]
      };
    },
    handelDialogResetupdate(verification, SingleproductForm) {
      this.dialogStatus = "update";
      // this.$refs[SingleproductForm].resetFields();
      this.dialogFormVisible = false;
      this.cakelist = [];
      this.SingleproductForm = {
        name: "",
        cakeType: "",
        categoryId: "",
        materialId: "",
        Commoditymaterials: "", // 商品原料
        mainPic: "", //  主图
        pics: [], //附图
        description: "",
        goodsSkuRequests: [
          {
            specs: "", //规格名
            price: "", // 定价
            skuCode: "", // sku 码
            upc: "", // uPc
            goodsState: 1, //商品状态
            isCombination: 1
          }
        ]
      };
    },
    handelcancelType() {
      this.SingleproductForm.cakeType = "";
      this.caketype = !this.caketype;
    },
    handelcancelMaterials() {
      this.SingleproductForm.Commoditymaterials = "";
      this.materials = !this.materials;
    },
    handelSingleMaterials(item) {
      var materialsName;
      materialsName = item.join(",");
      this.SingleproductForm.Commoditymaterials = materialsName;
      this.materials = false;
      this.materialslist = [];
    },
    // 选择确定类型
    handelselectType(item) {
      this.SingleproductForm.cakeType = item;
      this.GoodsInfocakeType = this.SingleproductForm.cakeType;
      this.caketype = false;
    },
    handelcategoryName(item) {
      if (item) {
        if (item[0] == "1670323326059520") {
          this.materialsShow = true;
          this.upload_ingredientshow = true;
        } else {
          this.materialsShow = false;
          this.upload_ingredientshow = false;
        }
        this.SingleproductForm.categoryId = item[1];
        // this.categoryId= item[1];
        var str = [];
        this.cakelist.map(parent => {
          parent.children.map(child => {
            if (item[1] === child.value) {
              str.push(child);
            }
          });
        });
        if (str && str.length > 0) {
          this.GoodsInfocakeType = str[0].label;
        } else {
          this.GoodsInfocakeType = "";
        }
      }
    },

    handelcategoryzeName(item) {
      if (item[0] == "1670323326059520") {
        this.materialsShow = true;
      } else {
        this.materialsShow = false;
      }
      this.CommodityFormList.categoryId = item[1];
      var str = [];
      this.cakelist.map(parent => {
        parent.children.map(child => {
          if (item[1] === child.value) {
            str.push(child);
          }
        });
      });
      this.GoodsInfocakeType = str[0].label;
    },
    handlematerialzhName(values, item) {
      if (this.checkedmaterialslist.length >= 10) {
        this.$message({
          message: "该商品原料最多可添加10个",
          type: "warning"
        });
        return false;
      } else {
        var materialslists = [],
          SelectedmaterialsList = [];
        item.map(child => {
          materialslists.push(child.value);
          SelectedmaterialsList.push({
            materialId: child.value,
            materialName: child.label,
            parentId: child.parentId
          });
        });
        this.materialslists = materialslists;
        this.checkedmaterialslist = SelectedmaterialsList;
      }
    },
    handlsearchsumbit() {
      //组合选择确定
      this.commodityserchshow = false;
    },
    handelcancelcommodityserch() {
      //item
      this.commodityserchshow = false;
    },
    handlematerialName(values, item) {
      if (this.checkedmaterialslist.length >= 10) {
        this.$message({
          message: "该商品原料最多可添加10个",
          type: "warning"
        });
        return false;
      } else {
        var materialslists = [],
          SelectedmaterialsList = [];
        item.map(child => {
          materialslists.push(child.value);
          SelectedmaterialsList.push({
            materialId: child.value,
            materialName: child.label,
            parentId: child.parentId
          });
        });
        this.materialslists = materialslists;

        this.checkedmaterialslist = SelectedmaterialsList;
      }
    },

    handleDelete_specification(index) {
      //删除规格
      this.$confirm("此操作将永久删除该规格, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (this.SingleproductForm.goodsSkuRequests.length <= 1) {
            this.$message({
              type: "warning",
              message: "至少留一个商品规格，不可移除!"
            });
          } else {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.SingleproductForm.goodsSkuRequests.splice(index, 1);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleAdd_specification() {
      //添加规格
      if (this.SingleproductForm.goodsSkuRequests.length <= 10) {
        this.SingleproductForm.goodsSkuRequests.push({
          specs: "", //规格名
          modifyPrice: "", // 定价
          skuCode: "", // sku 码
          upc: "", // uPc
          goodsState: 1, //商品状态
          isCombination: 1,
          goodsSkuProduction: null,
          materielState: 2
        });
      } else {
        this.$message({
          message: "该商品规格最多可添加10个",
          type: "warning"
        });
        return false;
      }
    },
    createSingleData(item, verification) {
      this.$refs[verification].validate(valid => {
        if (valid) {
          if (this.materialName == "蛋糕") {
            if (this.materialslists == "") {
              this.$message("请选择蛋糕原料");
              return false;
            }
          }
          if (item.goodsSkuRequests && item.goodsSkuRequests.length) {
            const specsValid = item.goodsSkuRequests.every(item => {
              return item.specs;
            });
            const specsValids = item.goodsSkuRequests.every(item => {
              if (item.specs <= 0) {
                return false;
              } else {
                return true;
              }
            });
            const priceValid = item.goodsSkuRequests.every(item => item.price);
            // const upcValid = item.goodsSkuRequests.every(item => item.upc);
            const skuCodeValid = item.goodsSkuRequests.every(item => {
              return item.skuCode;
            });
            const goodsSkuProductionValid = item.goodsSkuRequests.every(
              item => {
                return item.goodsSkuProduction;
              }
            );
            if (!specsValid) {
              this.$message("规格名必填");
              return false;
            } else if (!specsValids) {
              this.$message("规格名的值必须大于0");
              return false;
            } else if (!priceValid) {
              this.$message("单价必填");
              return false;
            } else if (!skuCodeValid) {
              this.$message("sku码必填");
              return false;
            }

            // else if (!upcValid) {
            //   this.$message("upc码必填");
            //   return false;
            // }
          }
          var piclist = [];
          item.pics.map(child => {
            piclist.push(child.url);
          });

          var goodsSkuRequests = [];

          item.goodsSkuRequests.map(item => {
            console.log(item, item.goodsSkuProduction);
            goodsSkuRequests.push({
              goodsState: item.goodsState,
              isCombination: item.isCombination,
              price: item.price * 100,
              skuCode: item.skuCode,
              specs: item.specs,
              upc: item.upc,
              goodsSkuProduction: item.goodsSkuProduction,
              materielState: item.materielState
            });
          });
          var str = [];
          this.cakelist.map(parent => {
            parent.children.map(child => {
              if (item.categoryId === child.value) {
                str.push(parent);
              }
            });
          });
          if (str && str.length > 0) {
            if (str[0].value == "1670323326059520") {
              if (this.materialslists == "") {
                this.$message("请选择蛋糕原料");
                return false;
              }
            }
          }
          //单个商品新增提交
          const Singleproduct = {
            parentCategoryId: str[0].value,
            categoryName: str[0].label,
            deptId: this.clickFramingchecked == true ? "1" : this.cityareaId,
            name: item.name,
            categoryId: item.categoryId,
            materialId: this.materialslists,
            mainPic: item.mainPic,
            pics: piclist,
            description: item.description,
            isCombination: 1,
            goodsSkuRequests: goodsSkuRequests,
            goodsCombinationRequests: []
          };
          console.log(Singleproduct, "Singleproduct");
          addGoods(Singleproduct).then(res => {
            if (res.data.code == 200) {
              this.dialogFormVisible = false;
              this.$notify({
                title: "添加商品",
                message: "添加商品成功",
                type: "success",
                duration: 2000
              });
              this.getList();
              this.dialogFormVisible = false;
              this.$refs[verification].resetFields();
              this.materielState = 2;
              this.cakelist = [];
              this.selectedValue = [];
              this.materialslistValue = [];
              this.SingleproductForm = {
                name: "",
                cakeType: "",
                categoryId: "",
                materialId: "",
                Commoditymaterials: "", // 商品原料
                mainPic: "", //  主图
                pics: [], //附图
                description: "",

                goodsSkuRequests: [
                  {
                    specs: "", //规格名
                    price: "", // 定价
                    skuCode: "", // sku 码
                    upc: "", // uPc
                    goodsState: 1, //商品状态
                    isCombination: 2,
                    goodsSkuProduction: null
                  }
                ]
              };
            } else {
              this.$notify({
                title: "sku码重复",
                message: "sku码重复!请重新填写",
                type: "success",
                duration: 2000
              });
            }
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },

    updateSingleData(item, GoodsInfocakeType, verification) {
      this.$refs[verification].validate(valid => {
        if (valid) {
          if (item.goodsSkuRequests && item.goodsSkuRequests.length) {
            const specsValid = item.goodsSkuRequests.every(item => {
              return item.specs;
            });
            const specsValids = item.goodsSkuRequests.every(item => {
              if (item.specs <= 0) {
                return false;
              } else {
                return true;
              }
            });
            const priceValid = item.goodsSkuRequests.every(item => {
              return item.modifyPrice;
            });
            const priceValids = item.goodsSkuRequests.every(item => {
              if (item.modifyPrice <= 0) {
                return false;
              } else {
                return true;
              }
            });
            // const upcValid = item.goodsSkuRequests.every(item => item.upc);
            const skuCodeValid = item.goodsSkuRequests.every(
              item => item.skuCode
            );
            if (!specsValid) {
              this.$message("规格名必填");
              return false;
            } else if (!specsValids) {
              this.$message("规格名的值必须大于0");
              return false;
            } else if (!priceValid) {
              this.$message("单价必须大于0");
              return false;
            } else if (!priceValids) {
              this.$message("单价必须大于0");
              return false;
            } else if (!skuCodeValid) {
              this.$message("sku码必填");
              return false;
            }

            // else if (!upcValid) {
            //   this.$message("upc码必填");
            //   return false;
            // }
          }
          if (item.categoryId == "") {
            this.$message("请选择蛋糕类型");
            return false;
          }

          var piclist = [];
          item.pics.map(child => {
            piclist.push(child.url);
          });
          var materialIds = [];
          if (this.checkedmaterialslist) {
            this.checkedmaterialslist.map(item => {
              materialIds.push(item.materialId);
            });
          }
          var str = [];
          this.cakelist.map(parent => {
            parent.children.map(child => {
              if (item.categoryId === child.value) {
                str.push(parent);
              }
            });
          });
          if (str && str.length > 0) {
            if (str[0].value == "1670323326059520") {
              if (materialIds == "") {
                this.$message("请选择蛋糕原料");
                return false;
              }
            }
          }
          var goodsSkuRequests = [];
          item.goodsSkuRequests.map(item => {
            goodsSkuRequests.push({
              id: item.id,
              goodsState: item.goodsState,
              isCombination: item.isCombination,
              price: item.modifyPrice * 100,
              skuCode: item.skuCode,
              specs: item.specs,
              upc: item.upc,
              goodsSkuProduction: item.goodsSkuProduction,
              materielState: item.materielState
            });
          });
          //单个商品编辑提交
          const SingleproductForm = {
            deptId: this.clickFramingchecked == true ? "1" : this.cityareaId,
            parentCategoryId: str[0].value,
            categoryName: str[0].label,
            id: item.id,
            name: item.name,
            categoryId: item.categoryId,
            materialId: materialIds,
            mainPic: item.mainPic,
            pics: piclist,
            description: item.description,
            isCombination: 1,
            goodsSkuRequests: goodsSkuRequests,
            goodsCombinationRequests: [],
            isOnSale: 1
          };
          console.log(SingleproductForm, "SingleproductForm");
          goodsUpdate(SingleproductForm).then(res => {
            if (res.data.code == 200) {
              this.dialogFormVisible = false;
              this.$notify({
                title: "修改商品",
                message: "修改商品成功",
                type: "success",
                duration: 2000
              });
              this.materielState = 2;
              this.getList();
              this.cakelist = [];
              this.SingleproductForm = {
                name: "",
                cakeType: "",
                categoryId: "",
                materialId: "",
                Commoditymaterials: "", // 商品原料
                mainPic: "", //  主图
                pics: [], //附图
                description: "",
                goodsCombinationRequests: [],
                goodsSkuRequests: [
                  {
                    specs: "", //规格名
                    price: "", // 定价
                    skuCode: "", // sku 码
                    upc: "", // uPc
                    goodsState: 1, //商品状态
                    isCombination: 1
                  }
                ]
              };
            } else {
              this.$notify({
                title: "sku码重复",
                message: "sku码重复!请重新填写",
                type: "success",
                duration: 2000
              });
            }
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    //组合商品-----------------------------------------------
    handleCommodity() {
      //添加组合商品
      this.diaCommodityStatus = "create";
      this.showbutton = !this.showbutton;
      this.dialogCommodityVisible = true;
      this.SingleproductForm.pics = [];
      this.getCategoriesList();
      this.getcakelist(); //查蛋糕类型
      this.selectedValue = [];
      this.materialslistValue = [];
      this.CommodityFormList = {
        name: "",
        cakeType: "",
        categoryId: "",
        materialId: "",
        description: "",
        Commoditymaterials: "", // 商品原料
        mainPic: "", //  主图
        pics: [], //附图
        commodityserch: "",
        goodsState: 1, //商品状态
        goodsCombinationList: [], //组合数据
        price: "", // 定价
        skuCode: "", // sku 码
        upc: "", // uPc
        zuModifyPrice: ""
      };
    },
    handelcancelcommodity() {
      this.CommodityFormList.cakeType = "";
      this.caketype = !this.caketype;
    },
    handelMaterials(item) {
      var materialsName;
      materialsName = item.join(",");
      this.CommodityFormList.Commoditymaterials = materialsName;
      this.materials = !this.materials;
    },
    handlecomDeit(item) {
      if (item.deptId == 1) {
        if (this.clickFramingchecked == true) {
          //城市ID为1及选中全国
          this.$confirm(
            "编辑商品后,全国其他城市同一商品会同步修改, 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }
          )
            .then(() => {
              this.getCategoriesList();
              this.getcakelist();
              this.showbutton = false;
              //组合编辑页面
              var materialIdlsit = [];
              this.diaCommodityStatus = "update";
              this.dialogCommodityVisible = true;
              if (item.parentCategoryId) {
                if (item.parentCategoryId == "1670323326059520") {
                  this.materialsShow = true;
                } else {
                  this.materialsShow = false;
                }
              }
              GoodsInfo({
                goodsId: item.id
              }).then(response => {
                this.CommodityFormList.name = response.data.data.name;
                this.CommodityFormList.categoryId =
                  response.data.data.categoryId;
                this.CommodityFormList.id = response.data.data.id;
                this.CommodityFormList.mainPic = response.data.data.mainPic;
                this.CommodityFormList.description =
                  response.data.data.description;
                this.GoodsInfocakeType = item.categoryName;
                this.CommodityFormList.pics = response.data.data.goodsPicList;
                this.checkedmaterialslist =
                  response.data.data.goodsRelationMaterialVOList;
                this.checkedmaterialslist.map(child => {
                  materialIdlsit.push(child.id);
                });
                this.CommodityFormList.materialId = materialIdlsit;
                this.CommodityFormList.goodsCombinationList =
                  response.data.data.goodsCombinationList;
                this.CommodityFormList.pics.map(child => {
                  child.url = child.pic;
                });
                if (
                  this.CommodityFormList.goodsCombinationList &&
                  this.CommodityFormList.goodsCombinationList.length
                ) {
                  this.CommodityFormList.skuCode = this.CommodityFormList.goodsCombinationList[0].zuSkuCode;
                  this.CommodityFormList.price = this.CommodityFormList.goodsCombinationList[0].price;
                  this.CommodityFormList.zuModifyPrice = this.CommodityFormList.goodsCombinationList[0].zuModifyPrice;
                  this.CommodityFormList.upc = this.CommodityFormList.goodsCombinationList[0].zuUpc;
                  this.CommodityFormList.goodsState = this.CommodityFormList.goodsCombinationList[0].zuGoodsState;
                }
                this.combinedData = response.data.data.goodsCombinationList; //组合 查询数据
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消修改"
              });
            });
        } else {
          this.$message({
            type: "warning",
            message: "不能编辑该商品,需要勾选全国按钮去编辑"
          });
          return false;
        }
      } else {
        this.getCategoriesList();
        this.getcakelist();
        this.showbutton = false;
        //组合编辑页面
        var materialIdlsit = [];
        this.diaCommodityStatus = "update";
        this.dialogCommodityVisible = true;

        if (item.parentCategoryId) {
          if (item.parentCategoryId == "1670323326059520") {
            this.materialsShow = true;
          } else {
            this.materialsShow = false;
          }
        }
        GoodsInfo({
          goodsId: item.id
        }).then(response => {
          this.CommodityFormList.name = response.data.data.name;
          this.CommodityFormList.categoryId = response.data.data.categoryId;
          this.CommodityFormList.id = response.data.data.id;
          this.CommodityFormList.mainPic = response.data.data.mainPic;
          this.CommodityFormList.description = response.data.data.description;
          this.GoodsInfocakeType = item.categoryName;
          this.CommodityFormList.pics = response.data.data.goodsPicList;
          this.checkedmaterialslist =
            response.data.data.goodsRelationMaterialVOList;
          this.checkedmaterialslist.map(child => {
            materialIdlsit.push(child.id);
          });
          this.CommodityFormList.materialId = materialIdlsit;
          this.CommodityFormList.goodsCombinationList =
            response.data.data.goodsCombinationList;
          this.CommodityFormList.pics.map(child => {
            child.url = child.pic;
          });
          if (
            this.CommodityFormList.goodsCombinationList &&
            this.CommodityFormList.goodsCombinationList.length
          ) {
            this.CommodityFormList.skuCode = this.CommodityFormList.goodsCombinationList[0].zuSkuCode;
            this.CommodityFormList.price = this.CommodityFormList.goodsCombinationList[0].price;
            this.CommodityFormList.zuModifyPrice = this.CommodityFormList.goodsCombinationList[0].zuModifyPrice;
            this.CommodityFormList.upc = this.CommodityFormList.goodsCombinationList[0].zuUpc;
            this.CommodityFormList.goodsState = this.CommodityFormList.goodsCombinationList[0].zuGoodsState;
          }
          this.combinedData = response.data.data.goodsCombinationList; //组合 查询数据
        });
      }
    },
    handelDialogResetCommodity(verification, complaintAdd) {
      //取消组合页面
      this.dialogCommodityVisible = false;
      this.$refs[complaintAdd].resetFields();
    },
    createcommodityData(item, verification) {
      this.$refs[verification].validate(valid => {
        if (this.materialName == "蛋糕") {
          if (this.materialslists == "") {
            this.$message("请选择蛋糕原料");
            return false;
          }
        }
        if (valid) {
          var combinedDataCode = [];
          this.combinedDataName.map(child => {
            combinedDataCode.push({
              zuGoodsId: child.zuGoodsId,
              zuGoodsName: child.zuGoodsName,
              zuSkuCode: item.skuCode,
              zuUpc: item.upc,
              zuGoodsState: item.goodsState,
              zuPrice: item.price * 100,
              zuSpecs: child.zuSpecs
            });
          });
          this.combinedDataCode = combinedDataCode;
          var piclist = [];
          item.pics.map(child => {
            piclist.push(child.url);
          });
          var str = [];
          this.cakelist.map(parent => {
            parent.children.map(child => {
              if (item.categoryId === child.value) {
                str.push(parent);
              }
            });
          });
          if (str && str.length > 0) {
            if (str[0].value == "1670323326059520") {
              if (this.materialslists == "") {
                this.$message("请选择蛋糕原料");
                return false;
              }
            }
          }
          if (item.price == "") {
            this.$message("定价必填");
            return false;
          }
          if (this.combinedDataCode == "") {
            this.$message("组合商品及sku不为空");
            return false;
          }
          //组合商品新增提交
          const SingleproductForm = {
            parentCategoryId: str[0].value,
            categoryName: str[0].label,
            deptId: this.clickFramingchecked == true ? "1" : this.cityareaId,
            name: item.name,
            categoryId: item.categoryId,
            materialId: this.materialslists,
            mainPic: item.mainPic,
            pics: piclist,
            description: item.description,
            isCombination: 2,
            goodsSkuRequests: [],
            goodsCombinationRequests: this.combinedDataCode
          };
          addGoods(SingleproductForm).then(res => {
            if (res.data.code == 200) {
              this.$notify({
                title: "添加商品",
                message: "添加商品成功",
                type: "success",
                duration: 2000
              });
              this.getList();
              this.dialogCommodityVisible = false;
              this.$refs[verification].resetFields();
              this.goodsCombinationRequests = [];
              this.selectedValue = [];
              this.materialslistValue = [];
            } else {
              this.$notify({
                title: "sku码重复",
                message: "sku码重复!请重新填写",
                type: "success",
                duration: 2000
              });
            }
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    updatecommodityData(item, GoodsInfocakeType, verification) {
      this.$refs[verification].validate(valid => {
        if (valid) {
          //组合商品编辑提交
          var goodsCombinationLists = [];
          this.CommodityFormList.goodsCombinationList.map(child => {
            console.log(child, "child");
            goodsCombinationLists.push({
              zuSkuId: child.zuSkuId,
              zuGoodsId: child.zuGoodsId,
              zuGoodsName: child.zuGoodsName,
              zuSkuCode: item.skuCode,
              zuUpc: item.upc,
              zuGoodsState: item.goodsState,
              zuPrice: item.zuModifyPrice * 100,
              zuSpecs: child.zuSpecs
            });
          });
          var piclist = [];
          item.pics.map(child => {
            piclist.push(child.url);
          });

          if (item.categoryId == "") {
            this.$message("请选择蛋糕类型");
            return false;
          }
          if (item.skuCode == "") {
            this.$message("sku码必填");
            return false;
          }
          if (item.zuModifyPrice == "") {
            this.$message("定价必填");
            return false;
          }
          var materialIds = [];
          if (this.checkedmaterialslist) {
            this.checkedmaterialslist.map(item => {
              materialIds.push(item.materialId);
            });
          }
          var str = [];
          this.cakelist.map(parent => {
            parent.children.map(child => {
              if (item.categoryId === child.value) {
                str.push(parent);
              }
            });
          });
          if (str[0]) {
            if (str[0].value == "1670323326059520") {
              if (materialIds == "") {
                this.$message("请选择蛋糕原料");
                return false;
              }
            }
          }

          if (goodsCombinationLists == "") {
            this.$message("组合商品及sku不为空");
            return false;
          }
          const commodityData = {
            deptId: this.clickFramingchecked == true ? "1" : this.cityareaId,
            parentCategoryId: str[0].value,
            categoryName: str[0].label,
            id: item.id,
            name: item.name,
            categoryId: item.categoryId,
            materialId: materialIds,
            mainPic: item.mainPic,
            pics: piclist,
            description: item.description,
            isCombination: 2,
            goodsSkuRequests: [],
            goodsCombinationRequests: goodsCombinationLists,
            isOnSale: 1
          };
          goodsUpdate(commodityData).then(res => {
            if (res.data.code == 200) {
              this.$notify({
                title: "修改商品",
                message: "修改商品成功",
                type: "success",
                duration: 2000
              });
              this.dialogCommodityVisible = false;
              this.goodsCombinationRequests = [];
              (this.CommodityFormList.commodityserch = ""),
                // this.$refs[verification].resetFields();
                this.getList();
            } else {
              this.$notify({
                title: "sku码重复",
                message: "sku码重复!请重新填写",
                type: "success",
                duration: 2000
              });
            }
          });
        } else {
          // console.log('error submit!!');
          return false;
        }
      });
    },
    // 组合
    handlecommodityserch(name) {
      searchGoodsList({
        deptId: this.clickFramingchecked == true ? "1" : this.cityareaId,
        name: name
      }).then(response => {
        // const batchdata = response.data.data;
        // const dataValueBatch = batchdata =>
        //   batchdata.map(
        //     ({
        //       id,
        //       name,
        //       goodsSkuList,
        //     }) =>
        //     goodsSkuList ? {
        //       value: id,
        //       label: name,
        //       children: dataValueBatch(goodsSkuList),
        //     } : {
        //       value: id,
        //       label: name
        //     }
        //   );
        // this.combinedData = dataValueBatch(batchdata)
        this.combinedData = response.data.data;
        if (this.combinedData && this.combinedData.length) {
          this.commodityserchshow = true;
        } else {
          this.$message("无此商品名称请重新输入");
          this.commodityserchshow = false;
        }
      });
    },
    handleGoodsList(name, specs, skuId) {
      this.commodityserchshow = false;
      if (this.CommodityFormList.goodsCombinationList.length < 20) {
        this.CommodityFormList.goodsCombinationList.push({
          zuGoodsId: skuId,
          zuGoodsName: name,
          zuSpecs: specs
        });
        this.combinedDataName.push({
          zuGoodsId: skuId,
          zuGoodsName: name,
          zuSpecs: specs
        });
      } else {
        this.$message({
          message: "该商品规格最多可添加20个",
          type: "warning"
        });
        return false;
      }
    },
    headleclose() {
      this.commodityserchshow = false;
    },

    //上传配料表----------------------------------------------------------------------
    handleupload_ingredient(item, index) {
      this.ingredientshow = true;
      this.addindex = index;
    },
    //编辑物料表
    handleuedit_ingredient(item, index) {
      console.log(item, "items");
      this.eidtingredient = item.goodsSkuProduction;
      this.ingredientshowedit = true;
      this.addindex = index;
    },

    //取消上传配料表
    handleingredientclose() {
      this.ingredientshow = false;
    },
    //取消编辑物料表
    handleingredientclosedit() {
      this.ingredientshowedit = false;
    },

    addingredientform(somedata) {
      console.log(somedata, "somedata");

      const nowRowData = this.SingleproductForm.goodsSkuRequests[this.addindex];
      const b = Object.assign(nowRowData, { goods: somedata }, somedata);
      this.SingleproductForm.goodsSkuRequests[
        this.addindex
      ].goodsSkuProduction = b.goods;
      this.ingredientshow = false;
    },
    eidtingredientedit(somedata) {
      const nowRowData = this.SingleproductForm.goodsSkuRequests[this.addindex];
      const b = Object.assign(nowRowData, { goods: somedata });
      this.SingleproductForm.goodsSkuRequests[this.addindex] = b;
      this.ingredientshowedit = false;
    },
    handleCloseSingleproduct() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.upload_ingredientshow = false;
          this.dialogFormVisible = false;
          done();
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss">
.rows {
  display: flex;
  justify-content: space-around;
}

.el-cascader {
  display: inline-block;
  position: relative;
  font-size: 14px;
  line-height: 40px;
}

.el-cascader__tags {
  position: absolute;
  left: 0;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-wrap: wrap;
  line-height: normal;
  text-align: left;
  box-sizing: border-box;
}

table tr,
table tr td {
  border: 1px solid #dfe4ed;
  border-bottom: 1px solid #ebeef5 !important;
  border-top: none !important;
  border-left: none !important;
}

.el-input.is-disabled .el-input__inner {
  color: #606266;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}

.Singleproduct {
  .el-form-item {
    margin-bottom: 30px !important;
  }

  .select-head-cont {
    // border: 1px solid #dcdfe6;
    // height: 32px;
    background-color: #fff;
    width: 200px;
    border-radius: 4px;
    display: block;
    position: relative;

    .selct-img {
      width: 10px;
      height: 10px;
      position: absolute;
      right: 10px;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }

  .el-tabs__item.is-active {
    color: #fff;
    background: #409eff;
    text-align: center !important;
  }

  .el-tabs--left .el-tabs__item.is-left {
    text-align: center !important;
  }

  el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    /* background-color: #E4E7ED; */
    z-index: 1;
  }

  .caketype {
    border: 1px solid #dcdfe6;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 5px 0;
    width: 300px;
    position: relative;

    &:after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      top: 1px;
      margin-left: -6px;
      border-top-width: 0;
      border-bottom-color: #fff;
    }

    .el-radio-group {
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      background-origin: padding-box;
      line-height: 30px;
      height: 170px;
      overflow: hidden;
      overflow-y: scroll;

      .el-radio {
        line-height: 30px;
      }
    }

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      background-origin: padding-box;
      line-height: 30px;
      height: 170px;
      overflow: hidden;
      overflow-y: scroll;

      .el-radio {
        line-height: 30px;
      }
    }

    .buttontips {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }

  .specifications {
    .title {
      display: flex;
      line-height: 30px;
      color: #ff0000;
      font-size: 15px;

      img {
        width: 30px;
        height: 30px;
        margin-right: 8px;
      }
    }

    .rows {
      display: flex;
      border-bottom: 1px solid #d9d9d9;
      margin-bottom: 10px !important;

      .el-form-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px !important;

        .el-form-item__label {
          text-align: left;
        }

        .el-form-item__content {
          margin-left: 0 !important;
        }
      }

      .Delete_specification {
        margin-top: 20px;
        display: flex;
        line-height: 28px;

        span {
          font-size: 15px;
          color: #ff0000;
          padding-left: 5px;
        }

        i {
          font-size: 20px;
          line-height: 28px;
          color: #ff0000;
        }
      }

      .upload_ingredient {
        display: flex;
        line-height: 28px;

        i {
          font-size: 20px;
          line-height: 28px;
          color: green;
        }

        span {
          font-size: 15px;
          color: green;
          padding-left: 5px;
        }
      }

      .edit_ingredient {
        display: flex;
        line-height: 28px;

        i {
          font-size: 20px;
          line-height: 28px;
          color: #e2ba24;
        }

        span {
          font-size: 15px;
          color: #e2ba24;
          padding-left: 5px;
        }
      }
    }
  }
}

.Commodityproduct {
  .el-form-item {
    margin-bottom: 30px !important;
  }

  .select-head-cont {
    // border: 1px solid #dcdfe6;
    // height: 32px;
    background-color: #fff;
    width: 200px;
    border-radius: 4px;
    display: block;
    position: relative;

    .selct-img {
      width: 10px;
      height: 10px;
      position: absolute;
      right: 10px;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }

  .el-tabs__item.is-active {
    color: #fff;
    background: #409eff;
    text-align: center !important;
  }

  .el-tabs--left .el-tabs__item.is-left {
    text-align: center !important;
  }

  el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    /* background-color: #E4E7ED; */
    z-index: 1;
  }

  .caketype {
    border: 1px solid #dcdfe6;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 5px 0;
    width: 300px;
    position: relative;

    &:after {
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      top: 1px;
      margin-left: -6px;
      border-top-width: 0;
      border-bottom-color: #fff;
    }

    .el-radio-group {
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      background-origin: padding-box;
      line-height: 30px;
      height: 170px;
      overflow: hidden;
      overflow-y: scroll;

      .el-radio {
        line-height: 30px;
      }
    }

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      background-origin: padding-box;
      line-height: 30px;
      height: 170px;
      overflow: hidden;
      overflow-y: scroll;

      .el-radio {
        line-height: 30px;
      }
    }

    .buttontips {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }

  .specificationsslist {
    padding: 10px;
    border: 1px solid #dcdfe6;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    margin: 5px 0;
    width: 400px;
    height: 200px;
    position: absolute;
    width: 100%;
    z-index: 999;

    .el-tabs--left .el-tabs__header.is-left {
      width: 80%;
    }

    .close {
      position: absolute;
      top: 0;
      right: 0;
    }

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
      padding: 10px 0;
      background-origin: padding-box;
      line-height: 30px;
      height: 170px;
      overflow: hidden;
      overflow-y: scroll;

      .el-radio {
        line-height: 30px;
      }
    }

    .buttontips {
      position: absolute;
      bottom: 0;
      right: 0;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
      margin-right: 10px;
    }
  }

  .specifications {
    .lows {
      display: flex;
      justify-content: space-around;

      .el-form-item {
        display: flex;
        flex-direction: column;

        .el-form-item__label {
          text-align: left;
        }

        .el-form-item__content {
          margin-left: 0 !important;
        }
      }
    }
  }
}

.app-container {
  padding: 20px;

  .filter_container {
    .rows {
      display: flex;
      justify-content: space-between;
    }

    .el-form-item {
      margin-bottom: 22px !important;
    }

    .lows {
      display: flex;
      justify-content: flex-end;
    }

    .addshop {
      position: relative;

      .showbutton {
        position: absolute;
        width: 90px;
        color: #409eff;
        border: 1px solid #b3d8ff;
        background: #fff;
        text-align: center;
        box-sizing: border-box;
        outline: none;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 12px;
        border-radius: 3px;
        z-index: 999;
        top: 34px;
      }
    }
  }

  .table_list {
    .warning-row {
      background: #fdf5e6;
      color: #e6a23c;
    }
  }
}

.createshop {
  display: flex;
  justify-content: space-between;

  .left {
    width: 18%;
    font-size: 20px;
  }

  .right {
    width: 78%;

    .flex {
      display: flex;
      margin-bottom: 10px;

      .title {
        text-align: right;
        float: left;
        font-size: 14px;
        color: #606266;
        line-height: 32px;
        padding: 0 12px 0 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }
    }
  }
}
</style>
